<template>
  <div>
    <custom-table
      :columns="columns"
      :query="queryParams"
      v-bind="$attrs"
      v-on="listeners"
      :show-head-btn="['flush','delete']"
      :show-row-btn="['update','delete']"
      @tap-head-btn="onTapHeadBtn"
      @tap-row-btn="onTapRowBtn"
      @row-dblclick="onRowDbClick"
    >
    <!-- <template slot="after-head-button">
      <div style="display: flex;">
      <el-upload
    multiple
    :action="fileUrl"
    :headers="headers"
    :limit="limitNum"
    accept=".xls,.xlsx,csv"
    :file-list="fileList"
    :before-upload="beforeUpload"
    :on-exceed="onExceed"
    :on-success="onSuccess"
    :on-error = "onError"
    :show-file-list="showFileList">
      <el-button :loading="downloadLoadings"  class="filter-item" size="mini" type="primary" icon="el-icon-download">导入租户</el-button>
		</el-upload>
  </div>
    </template> -->
    </custom-table>
  </div>

</template>

<script>
import tableMixin from '@/utils/mixin/custom-table'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      columns: [
        // { name: '账号', field: 'username', width: 150 },
        // { name: '昵称', field: 'nickname', width: 150 },
        { name: '真实姓名', field: 'real_name', width: 150 },
        { name: '头像', field: 'avatar', type: 'image' },
        { name: '手机号', field: 'tel' },
        { name: '身份证', field: 'id_card' },
        { name: '出生日期', field: 'birthday' },
        { name: '性别', field: 'sex', label: true, type: 'tag' },
        { name: '小区名称', field: 'housing_name', type: 'tag' },
        { name: '楼栋号', field: 'building_name', type: 'tag' },
        { name: '房间号', field: 'room_name', type: 'tag' },
        // { name: '邮箱', field: 'email' },
        // { name: '购买次数', field: 'pay_count' },
        // { name: '类型', field: 'type', label: true, type: 'tag', opts: {},width: 100 },
        { name: '状态', field: 'status', label: true, type: this.checkAuth('change') ? 'switch' : 'tag', opts: {} },
        // { name: '最后登录时间', field: 'last_login_time', width: 150 },
        // { name: '最后登录IP', field: 'last_login_ip', width: 150 },
        { name: '工作单位', field: 'word_unit' },
        { name: '备注', field: 'mark', type: 'content' },
        { name: '添加时间', field: 'create_time', width: 150 }
      ],
      fileUrl: process.env.VUE_APP_BASE_API + 'v1/attachment/importUserExcel', // 上传文件的域名地址
      limitNum: 1, // 文件上传个数限制
      fileList: [], // 文件列表
      showFileList: false, // 文件列表是否显示,默认不显示
      headers: {
        'Access-Token': getToken(),
        'X-Requested-With': 'XMLHttpRequest'
      },
      downloadLoadings: false
    }
  },
  components: {},
  mixins: [
    tableMixin
  ],
  computed: {},
  props: {},
  filters: {},
  created() {
  },
  methods: {
    // 文件上传类型
    // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet --- 后缀为 .xlsx
    // application/vnd.ms-excel --- 后缀为 .xls或.csv
    // 文件上传之前的钩子,可以做一些验证或限制
    beforeUpload(file) {
      console.log('beforeUpload', file)
      let regExp = file.name.replace(/.+\./, '')
      let lower = regExp.toLowerCase() // 把大写字符串全部转为小写字符串
      let suffix = ['xls', 'xlsx']
      if (suffix.indexOf(lower) === -1) {
        return this.$message.warning('请上传后缀名为 xls、xlsx 的附件 !')
      }
      this.downloadLoadings = true
      // let isLt2M = file.size / 1024 / 1024 < 2
      // if (!isLt2M) {
      //   return this.$message.error('请上传文件大小不能超过 2MB 的附件 !')
      // }
    },
    // 导入表格格式校验,后端已做验证，这个暂时不需要
    // beforeUpload(file) {
    //   // let regExp = file.name.replace(/.+\./, '');
    //   // let suffix = ['xls', 'xlsx'];
    //   // if (suffix.indexOf(regExp.toLowerCase()) === -1) {
    //   // 	return this.$message.warning('请上传后缀名为 xls、xlsx 的附件 !');
    //   // }
    // },
    // 文件超出个数限制时的钩子
    onExceed(files, fileList) {
      console.log('onExceed-files', files)
      console.log('onExceed-fileList', fileList)
      return this.$message.warning(`只能选择${this.limitNum}个文件,当前共选择了${files.length + fileList.length}个`)
    },
    // 文件上传成功时的钩子
    onSuccess(response, file, fileList) {
      console.log('onSuccess', response)
      console.log('onSuccess', file)
      console.log('onSuccess', response)
      this.onTapHeadBtnFlush({})
      this.fileList = []
      this.downloadLoadings = false
    },
    // 文件上传失败时的钩子
    onError() {
      this.fileList = []
      this.downloadLoadings = false
    }
  }
}
</script>

<style lang="scss">

</style>
